$(document).ready(function () {
    // 课程封面上传处理 - 修改事件绑定方式
    $('#uploadContent').on('click', function (e) {
        console.log("uploadContent点击事件触发");
        e.preventDefault();
        e.stopPropagation();
        // 直接触发文件选择，采用原生的click方法触发，提高兼容性
        var imageUpload = document.getElementById('imageUpload');
        if (imageUpload) {
            var clickEvent = document.createEvent('MouseEvents');
            clickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            imageUpload.dispatchEvent(clickEvent);
        }
    });

    // 确保点击上传区域但不在内容区域时也能触发上传
    $('#uploadArea').on('click', function (e) {
        console.log("uploadArea点击事件触发");
        if (e.target === this) {
            e.preventDefault();
            // 同样采用原生方法触发文件选择框点击
            var imageUpload = document.getElementById('imageUpload');
            if (imageUpload) {
                var clickEvent = document.createEvent('MouseEvents');
                clickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                imageUpload.dispatchEvent(clickEvent);
            }
        }
    });

    // 文件选择变化时的处理
    $('#imageUpload').on('change', function (e) {
        console.log("imageUpload文件选择变化事件触发");
        const file = e.target.files[0];
        if (!file) return;

        // 验证文件
        const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
        const maxSize = 2 * 1024 * 1024; // 2MB

        if (!allowedTypes.includes(file.type)) {
            alert('请上传正确的图片格式（JPG, PNG, GIF）');
            return;
        }

        if (file.size > maxSize) {
            alert('图片大小不能超过2MB');
            return;
        }

        // 显示上传进度
        $('#uploadContent').hide();
        $('#uploadProgress').show();

        // 模拟上传进度
        let progress = 0;
        const interval = setInterval(() => {
            progress += 5;
            $('#uploadProgressBar').css('width', `${progress}%`);
            $('#uploadProgressText').text(`${progress}%`);

            if (progress >= 100) {
                clearInterval(interval);

                // 读取并显示图片
                const reader = new FileReader();
                reader.onload = function (e) {
                    $('#previewImage').attr('src', e.target.result);
                    $('#uploadProgress').hide();
                    $('#previewContent').show();
                };
                reader.readAsDataURL(file);
            }
        }, 200);
    });

    // 删除封面
    $('#previewContent').on('click', function () {
        if (confirm('是否要删除当前封面？')) {
            $('#previewImage').attr('src', '');
            $('#previewContent').hide();
            $('#uploadContent').show();
            $('#imageUpload').val('');
        }
    });

    // 更新章节序号的函数
    function updateChapterNumbers() {
        $('.chapter-item').each(function (index) {
            $(this).find('.chapter-number').text(`第${index + 1}章：`);
        });
    }

    // 添加新章节
    $('#addChapter').on('click', function () {
        console.log("addChapter点击事件触发");
        // 获取当前章节数量
        const currentChapterCount = $('.chapter-item').length;
        const newChapterNumber = currentChapterCount + 1;

        const chapterHtml = `
            <div class="chapter-item">
                <div class="chapter-header">
                    <div class="chapter-title">
                        <span class="chapter-number">第${newChapterNumber}章：</span>
                        <input type="text" class="chapter-name" placeholder="请输入章节名称">
                    </div>
                    <div class="chapter-actions">
                        <button class="add-video-btn">+ 添加视频</button>
                        <button class="edit-btn">✎</button>
                        <button class="delete-btn">×</button>
                    </div>
                </div>
                <div class="chapter-content">
                    <div class="video-list">
                        <div class="video-upload">
                            <input type="file" class="video-file" accept="video/*" style="display: none;">
                            <div class="upload-hint">
                                <i class="upload-icon">📤</i>
                                <span>点击上传视频</span>
                            </div>
                            <div class="upload-progress" style="display: none;">
                                <div class="progress-bar"></div>
                                <span class="progress-text">0%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        $('#chapterList').append(chapterHtml);

        // 重新绑定章节标题编辑事件（确保新章节元素能触发编辑功能）
        $('#chapterList').on('click', '.chapter-number,.chapter-name', function (e) {
            console.log("章节标题点击编辑功能触发");
            const chapterTitle = $(this).closest('.chapter-title');
            const chapterNumber = chapterTitle.find('.chapter-number').text();
            const chapterNameInput = chapterTitle.find('.chapter-name');
            const currentName = chapterNameInput.val();

            // 如果已经在编辑状态，则返回
            if (chapterTitle.find('.chapter-edit-input').length > 0) return;

            // 保存章节编号，隐藏原有输入框
            chapterNameInput.hide();

            // 创建一个临时输入框，添加到章节号后面
            const inputHtml = `<input type="text" class="chapter-edit-input" value="${currentName}" 
                style="width: 80%; padding: 5px; margin-left: 5px;">`;
            chapterTitle.append(inputHtml);

            const input = chapterTitle.find('.chapter-edit-input');
            input.focus().select();

            // 处理失去焦点和回车事件
            input.on('blur keypress', function (e) {
                if (e.type === 'blur' || e.which === 13) {
                    const newName = $(this).val().trim();
                    if (newName) {
                        // 只更新名称输入框的值，保持章节号不变
                        chapterNameInput.val(newName).show();
                    } else {
                        chapterNameInput.show();
                    }
                    // 移除编辑输入框
                    $(this).remove();
                    if (e.type === 'keypress') {
                        e.preventDefault();
                    }
                }
            });
        });

        // 重新绑定章节删除按钮点击事件（确保新章节的删除按钮能触发删除功能）
        $('#chapterList').on('click', '.chapter-header.chapter-actions.delete-btn', function (e) {
            console.log("章节删除按钮（章节头部）点击事件触发");
            e.stopPropagation(); // 阻止事件冒泡
            if (confirm('确定要删除这个章节吗？')) {
                // 删除整个chapter-item元素
                $(this).closest('.chapter-item').remove();
                // 更新章节序号
                updateChapterNumbers();
            }
        });

        // 重新绑定添加视频按钮点击事件（确保新章节内的添加视频按钮能触发功能）
        $('#chapterList').on('click', '.add-video-btn', function () {
            console.log("add-video-btn点击事件触发");
            const videoList = $(this).closest('.chapter-item').find('.video-list');
            const videoUpload = videoList.find('.video-upload');
            // 采用原生方法触发文件选择框点击
            var videoFile = videoUpload.find('.video-file')[0];
            if (videoFile) {
                var clickEvent = document.createEvent('MouseEvents');
                clickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                videoFile.dispatchEvent(clickEvent);
            }
        });
    });

    // 章节相关事件委托
    $('#chapterList').on('click', '.delete-btn', function () {
        console.log("章节删除按钮点击事件触发");
        if (confirm('确定要删除这个章节吗？')) {
            $(this).closest('.chapter-item').remove();
            // 更新章节序号
            updateChapterNumbers();
        }
    });

    // 添加视频按钮点击事件
    $('#chapterList').on('click', '.add-video-btn', function () {
        console.log("add-video-btn点击事件触发");
        const videoList = $(this).closest('.chapter-item').find('.video-list');
        const videoUpload = videoList.find('.video-upload');
        // 采用原生方法触发文件选择框点击
        var videoFile = videoUpload.find('.video-file')[0];
        if (videoFile) {
            var clickEvent = document.createEvent('MouseEvents');
            clickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            videoFile.dispatchEvent(clickEvent);
        }
    });

    // 视频上传区域点击事件
    $('#chapterList').on('click', '.video-upload', function (e) {
        console.log("video-upload点击事件触发");
        if (e.target === this || $(e.target).hasClass('upload-hint') || $(e.target).parents('.upload-hint').length) {
            var videoFile = $(this).find('.video-file')[0];
            if (videoFile) {
                var clickEvent = document.createEvent('MouseEvents');
                clickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                videoFile.dispatchEvent(clickEvent);
            }
        }
    });

    // 视频文件选择事件
    $('#chapterList').on('change', '.video-file', function () {
        console.log("video-file文件选择变化事件触发");
        const file = this.files[0];
        if (file) {
            const videoUpload = $(this).closest('.video-upload');
            const uploadHint = videoUpload.find('.upload-hint');
            const uploadProgress = videoUpload.find('.upload-progress');
            const progressBar = uploadProgress.find('.progress-bar');
            const progressText = uploadProgress.find('.progress-text');

            // 验证视频格式
            const allowedTypes = ['video/mp4', 'video/webm', 'video/ogg'];
            if (!allowedTypes.includes(file.type)) {
                alert('请上传正确的视频格式（MP4, WebM, Ogg）');
                return;
            }

            // 验证文件大小（假设最大500MB）
            const maxSize = 500 * 1024 * 1024; // 500MB in bytes
            if (file.size > maxSize) {
                alert('视频文件不能超过500MB');
                return;
            }

            // 隐藏上传提示，显示进度条
            uploadHint.hide();
            uploadProgress.show();

            // 模拟上传进度
            let progress = 0;
            const interval = setInterval(() => {
                progress += 5;
                progressBar.css('width', progress + '%');
                progressText.text(progress + '%');

                if (progress >= 100) {
                    clearInterval(interval);

                    // 添加视频项
                    const videoItem = `
                        <div class="video-item">
                            <div class="video-info">
                                <span class="video-name">${file.name}</span>
                                <span class="video-duration">处理中...</span>
                            </div>
                            <div class="video-actions">
                                <button class="edit-btn">✎</button>
                                <button class="video-delete-btn">×</button>
                            </div>
                        </div>
                    `;
                    $(videoItem).insertBefore(videoUpload);

                    // 重新绑定视频删除按钮点击事件（确保新添加视频的删除按钮能触发功能）
                    $('#chapterList').on('click', '.video-item.video-actions .video-delete-btn', function (e) {
                        console.log("视频项删除按钮点击事件触发");
                        e.stopPropagation(); // 阻止事件冒泡
                        if (confirm('确定要删除这个视频吗？')) {
                            // 只删除当前的video-item元素
                            $(this).closest('.video-item').remove();
                        }
                    });

                    // 重置上传区域
                    uploadProgress.hide();
                    uploadHint.show();
                    progressBar.css('width', '0');
                    $(this).val('');

                    // 模拟获取视频时长
                    setTimeout(() => {
                        const randomDuration = Math.floor(Math.random() * 30) + 1;
                        videoUpload.prev().find('video-duration').text(`${randomDuration}分钟`);
                    }, 1000);
                }
            }, 200);
        }
    });

    // 视频项删除事件 - 明确指定视频项的删除按钮
    $('#chapterList').on('click', '.video-item .video-actions .video-delete-btn', function (e) {
        console.log("视频项删除按钮点击事件触发");
        e.stopPropagation(); // 阻止事件冒泡
        if (confirm('确定要删除这个视频吗？')) {
            // 只删除当前的video-item元素
            $(this).closest('.video-item').remove();
        }
    });

    // 章节删除事件 - 明确指定章节的删除按钮
    $('#chapterList').on('click', '.chapter-header.chapter-actions .delete-btn', function (e) {
        console.log("章节删除按钮（章节头部）点击事件触发");
        e.stopPropagation(); // 阻止事件冒泡
        if (confirm('确定要删除这个章节吗？')) {
            // 删除整个chapter-item元素
            $(this).closest('.chapter-item').remove();
            // 更新章节序号
            updateChapterNumbers();
        }
    });

    // 保存草稿
    $('.btn-draft').on('click', function () {
        console.log("btn-draft点击事件触发");
        // 收集所有数据
        const courseData = {
            basicInfo: {
                name: $('input[placeholder="请输入课程名称"]').val(),
                category: $('select').first().val(),
                description: $('textarea[placeholder="请输入课程简介"]').val(),
                coverImage: $('#previewImage').attr('src')
            },
            chapters: []
        };

        // 收集章节数据
        $('.chapter-item').each(function () {
            const chapter = {
                title: $(this).find('.chapter-name').val(),
                videos: []
            };

            // 收集视频数据
            $(this).find('.video-item').each(function () {
                chapter.videos.push({
                    name: $(this).find('.video-name').text(),
                    duration: $(this).find('.video-duration').text()
                });
            });

            courseData.chapters.push(chapter);
        });

        console.log('保存草稿：', courseData);
        alert('保存草稿成功！');
    });

    // 章节标题点击编辑功能 - 支持点击名称和修改按钮
    $('#chapterList').on('click', '.chapter-number,.chapter-name,.chapter-title .edit-btn', function (e) {
        e.stopPropagation(); // 阻止事件冒泡，防止外部干扰此编辑功能
        console.log("章节标题点击编辑功能触发");
        const chapterTitle = $(this).closest('.chapter-title');
        const chapterNumber = chapterTitle.find('.chapter-number').text();
        const chapterNameInput = chapterTitle.find('.chapter-name');
        const currentName = chapterNameInput.val();

        // 如果已经在编辑状态，则返回
        if (chapterTitle.find('.chapter-edit-input').length > 0) return;

        // 保存章节编号，隐藏原有输入框
        chapterNameInput.hide();

        // 创建一个临时输入框，添加到章节号后面
        const inputHtml = `<input type="text" class="chapter-edit-input" value="${currentName}" 
        style="width: 80%; padding: 5px; margin-left: 5px;">`;
        chapterTitle.append(inputHtml);

        const input = chapterTitle.find('.chapter-edit-input');
        input.focus().select();

        // 处理失去焦点和回车事件
        input.on('blur keypress', function (e) {
            e.stopPropagation(); // 再次阻止事件冒泡，确保内部操作不受外部影响
            if (e.type === 'blur' || e.which === 13) {
                const newName = $(this).val().trim();
                console.log("获取到的输入框新名称:", newName); // 输出获取到的新名称，方便调试查看
                if (newName) {
                    console.log("即将赋值给章节名称输入框，新名称:", newName); // 输出赋值前的信息，便于排查
                    // 只更新名称输入框的值，保持章节号不变
                    chapterNameInput.val(newName).show();
                    console.log("赋值后章节名称输入框的值:", chapterNameInput.val()); // 输出赋值后的信息
                } else {
                    chapterNameInput.show();
                }
                // 移除编辑输入框
                $(this).remove();
                if (e.type === 'keypress') {
                    e.preventDefault();
                }
            }
        });
    });

    // 视频名称编辑功能 - 支持点击名称或编辑按钮
    $('#chapterList').on('click', '.video-name, .video-item .edit-btn', function (e) {
        e.stopPropagation(); // 阻止事件冒泡，避免影响其他元素的事件处理
        console.log("视频名称编辑功能触发");
        const videoInfo = $(this).closest('.video-item').find('.video-info');
        const videoNameElement = videoInfo.find('.video-name');
        const fullName = videoNameElement.text();

        // 分离文件名和后缀
        const lastDotIndex = fullName.lastIndexOf('.');
        const nameWithoutExt = fullName.substring(0, lastDotIndex);
        const extension = fullName.substring(lastDotIndex);

        // 如果已经在编辑状态，则返回
        if (videoInfo.find('.video-edit-input').length > 0) return;

        // 创建输入框，只允许编辑文件名部分
        const inputHtml = `<input type="text" class="video-edit-input" value="${nameWithoutExt}" 
        style="width: 80%; padding: 5px;"><span class="video-extension">${extension}</span>`;

        // 替换原有内容
        videoNameElement.hide().after(inputHtml);
        const input = videoInfo.find('.video-edit-input');
        input.focus().select();

        // 处理失去焦点和回车事件
        input.on('blur keypress', function (e) {
            e.stopPropagation(); // 再次阻止事件冒泡，确保内部事件处理不受外部干扰
            if (e.type === 'blur' || e.which === 13) {
                const newName = $(this).val().trim();
                if (newName) {
                    // 组合新文件名（保留原后缀）
                    videoNameElement.text(newName + extension).show();
                } else {
                    videoNameElement.show();
                }
                // 移除编辑相关元素
                $(this).next('.video-extension').remove();
                $(this).remove();
                if (e.type === 'keypress') {
                    e.preventDefault();
                }
            }
        });
    });
});